Introducción a HTML, CSS y SVG
IIC2026
HTML
Introducción a HTML, CSS y SVG
IIC2026
HTML
- Lenguaje de marcado.
- Una de las tecnologías básicas de la web.
- Toda página web en funcionamiento es un documento HTML.
HyperText Markup Language
HyperText Markup Language
- Documentos de texto con información añadida.
- Permiten agregar enlaces e incluso multimedia.
- Es el trabajo de un navegador web leer estor archivos de texto e interpretarlos visualmente.
Etiquetas
| <etiqueta> |
| (contenido) |
| </etiqueta> |
| <etiqueta> |
| (contenido) |
| </etiqueta> |
| <etiqueta> |
| (contenido) |
| </etiqueta> |
Etiquetas
| <h1> Un título </h1> |
| |
| <p> Un párrafo </p> |
| |
| <h2> Un subtítulo </h2> |
| |
| <p> Otro párrafo </p> |
| <h1> Un título </h1> |
| |
| <p> Un párrafo </p> |
| |
| <h2> Un subtítulo </h2> |
| |
| <p> Otro párrafo </p> |
| <h1> Un título </h1> |
| |
| <p> Un párrafo </p> |
| |
| <h2> Un subtítulo </h2> |
| |
| <p> Otro párrafo </p> |
| <h1> Un título </h1> |
| |
| <p> Un párrafo </p> |
| |
| <h2> Un subtítulo </h2> |
| |
| <p> Otro párrafo </p> |
| <h1> Un título </h1> |
| |
| <p> Un párrafo </p> |
| |
| <h2> Un subtítulo </h2> |
| |
| <p> Otro párrafo </p> |
Etiquetas
| <ul> |
| <li>Primer elemento de lista.</li> |
| <li>Segundo elemento de lista.</li> |
| <li>Tercer elemento de lista.</li> |
| </ul> |
| <ul> |
| <li>Primer elemento de lista.</li> |
| <li>Segundo elemento de lista.</li> |
| <li>Tercer elemento de lista.</li> |
| </ul> |
Estructura de documento completo
Estructura de documento completo
| <!DOCTYPE html> |
| <html> |
| |
| </html> |
Estructura de documento completo
| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| |
| </head> |
| |
| <body> |
| |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| |
| </head> |
| |
| <body> |
| |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| |
| </head> |
| |
| <body> |
| |
| </body> |
| |
| </html> |
Estructura de documento completo
| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| |
| </head> |
| |
| <body> |
| |
| <h1> Un título </h1> |
| |
| <p> Un párrafo </p> |
| |
| <h2> Un subtítulo </h2> |
| |
| <p> Otro párrafo </p> |
| |
| <ul> |
| <li>Primer elemento de lista.</li> |
| <li>Segundo elemento de lista.</li> |
| <li>Tercer elemento de lista.</li> |
| </ul> |
| |
| </body> |
| |
| </html> |
Estructura de documento completo
| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <meta charset="utf-8"> |
| <title>Título de documento completo</title> |
| </head> |
| |
| <body> |
| |
| <h1> Un título </h1> |
| |
| <p> Un párrafo </p> |
| |
| <h2> Un subtítulo </h2> |
| |
| <p> Otro párrafo </p> |
| |
| <ul> |
| <li>Primer elemento de lista.</li> |
| <li>Segundo elemento de lista.</li> |
| <li>Tercer elemento de lista.</li> |
| </ul> |
| |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <meta charset="utf-8"> |
| <title>Título de documento completo</title> |
| </head> |
| |
| <body> |
| |
| <h1> Un título </h1> |
| |
| <p> Un párrafo </p> |
| |
| <h2> Un subtítulo </h2> |
| |
| <p> Otro párrafo </p> |
| |
| <ul> |
| <li>Primer elemento de lista.</li> |
| <li>Segundo elemento de lista.</li> |
| <li>Tercer elemento de lista.</li> |
| </ul> |
| |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <meta charset="utf-8"> |
| <title>Título de documento completo</title> |
| </head> |
| |
| <body> |
| |
| <h1> Un título </h1> |
| |
| <p> Un párrafo </p> |
| |
| <h2> Un subtítulo </h2> |
| |
| <p> Otro párrafo </p> |
| |
| <ul> |
| <li>Primer elemento de lista.</li> |
| <li>Segundo elemento de lista.</li> |
| <li>Tercer elemento de lista.</li> |
| </ul> |
| |
| </body> |
| |
| </html> |
Atributos
| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <meta charset="utf-8"> |
| <title>Título de documento completo</title> |
| </head> |
| |
| <body> |
| ... |
| </body> |
| |
| </html> |
Atributos
| <a href="https://cursos.canvas.uc.cl/">Soy un enlace a Canvas!</a> |
| |
| <img src="./ruta/a/la/imagen.png"></img> |
| <a href="https://cursos.canvas.uc.cl/">Soy un enlace a Canvas!</a> |
| |
| <img src="./ruta/a/la/imagen.png"></img> |
Atributos
Existen atributos globales:
id
| <h1 id="principal"> Soy el único título principal</h1> |
| <h2> Yo no uwu </h2> |
- Permite identificar elemento específico en todo el documento.
- Es único, solo un elemento puede tener un identificador específico.
class
| <p class="importante"> Soy un párrafo importante</p> |
| <p class="importante"> También soy importante</p> |
| <p> Yo no uwu </p> |
- Permite identificar grupos de elementos todo el documento.
- Múltiples elementos pueden compartir un valor de clase.
HTML
Introducción a HTML, CSS y SVG
IIC2026
¡Deja tus preguntas en los comentarios!